<template>
  <div class="container">
    <template v-if="!$_.isEmpty(managerInfo)">
      <div class="top-bg"></div>
      <div class="info-container">
        <basic-card :managerInfo="managerInfo"></basic-card>
        <card-info
          title="财富履历"
          :desc="managerInfo.fortuneExperience || '-'"
        ></card-info>
        <card-info
          title="财富理念"
          :desc="managerInfo.fortuneIdea || '-'"
        ></card-info>
      </div>
    </template>
    <template v-else>
      <div class="no-data">
        <img :src="emptyIcon" alt="" />
        <div class="text">您还没有订单</div>
        <div class="text">暂无专属理财经理哦~</div>
      </div>
    </template>
  </div>
</template>
<script>
import BasicCard from "./components/basic-card";
import CardInfo from "./components/card-info";
import { getDetail } from "@/api/financialManager";
import emptyIcon from "@/assets/images/myFinancialManager/empty-criterial.png";
export default {
  data() {
    return {
      managerInfo: {},
      emptyIcon,
    };
  },
  components: {
    BasicCard,
    CardInfo,
  },
  async created() {
    let res = await getDetail();
    if (res) {
      this.$_.hasIn(res, "data")?this.managerInfo = res.data:this.managerInfo = res
    }
  },
};
</script>
<style lang='scss' scoped>
.container {
  .info-container {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
  }
  .top-bg {
    background: url("../../assets/images/myFinancialManager/bg.png");
    width: 100%;
    min-height: 210px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .no-data {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    img {
      width: 80px;
      height: 80px;
    }
    .text {
      font-size: 14px;
      color: #888;
    }
  }
}
</style>